<template>
  <div class="page gray-page building-page">
    <nav-bar :title="title"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-collapse v-if="unitData.length" v-model="activeNames" :border="false">
        <van-collapse-item
          class="building-floor"
          size="large"
          v-for="(item, index) in unitData"
          :key="index"
          :title="`${toChinesNum(index + 1)}层`"
          :name="index + 1 + ''"
        >
          <van-row>
            <van-col
              :span="6"
              v-for="(o, key) in item"
              :key="key"
              class="building-room"
              :class="{
                'zy-room': o.houseState === '1',
                'cz-room': o.houseState === '2',
                'xz-room': o.houseState === '3'
              }"
              @click="
                $router.push({
                  path: `/gridmap/buildingPersonnel?houseCode=${o.houseCode}&curUnitName=${title}&curRoomName=${o.roomNo}`
                })
              "
            >
              <div class="building-room-info">
                <p>{{ o.roomNo }}</p>
                <!-- <p v-if="o.residentNum && o.houseState !== '3'">{{ personObj[o.houseState] }}{{ o.residentNum }}人</p>
                <p class="key-person" v-if="o.keyPerson">特殊人群：{{ o.keyPerson }}</p>
                <p class="key-person" v-if="o.keyTeenager">重点青少年：{{ o.keyTeenager }}</p>
                <p class="key-person" v-if="o.carePerson">关爱人员：{{ o.carePerson }}</p> -->
              </div>
            </van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
      <template v-else>
        <van-empty
          :image="require('@/assets/images/basic/pic_no_content.png')"
          description="暂无内容~"
          style="height: 300px"
        />
      </template>
      <div class="building-room-guide">
        <van-row>
          <van-col :span="8" v-for="item in guideData" :key="item.code" align="center">
            <em class="guide-color" :style="{ 'background-color': item.bgColor }"></em>
            {{ item.text }}
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { toChinesNum } from '@/libs/tool'
import gridMap from '@/api/gridMap'
export default {
  data() {
    return {
      toChinesNum,
      activeNames: [],
      unitData: [],
      guideData: [
        {
          code: '1',
          text: '自用房',
          bgColor: 'rgba(55, 194, 187, 0.5)'
        },
        {
          code: '2',
          text: '出租房',
          bgColor: 'rgba(152, 199, 232, 1)'
        },
        {
          code: '3',
          text: '闲置房',
          bgColor: 'rgba(236, 208, 166, 1)'
        }
      ],
      personObj: {
        1: '居民',
        2: '租户'
      },
      paramsData: null,
      title: ''
    }
  },
  mounted() {
    this.paramsData = {
      buildCode: this.$route.query.buildCode,
      unit: this.$route.query.unit
    }
    this.getUnitName()
    this.getUsehouse()
  },
  methods: {
    getUnitName() {
      // 获取单元名称
      gridMap.Map.unitName(this.paramsData).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.title = data
        }
      })
    },
    getUsehouse() {
      // 获取房屋使用情况
      gridMap.Build.usehouse(this.paramsData).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.unitData = []
          this.activeNames = []
          data.forEach((item, index) => {
            this.unitData.push(Object.values(item)[0])
            this.activeNames.push(index + 1 + '')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/gridmap/BuildingRoom/index.less';
</style>
